<template>
	<view class="container">
		<view class="uni-title uni-common-pl">输入或者复制文本，将进行注音</view>
		<view class="uni-textarea">
			<textarea @input="bindTextAreaBlur" :value="textData" auto-height></textarea>
		</view>
		<view class="text">
			<pinyin-text class="text-item" v-for="item in zhuyinData" :pinyin="item.pinyin" :hanzi="item.hanzi" :key="item.id">
			</pinyin-text>
		</view>
		<view class="oprate">
			<view class="switch">
				汉字<switch :checked="isCopyHanzi" @change="handleCopyHanzi"></switch>
			</view>
			<button size="mini" type="primary" @click="copyPinYin">复制拼音</button>
			<button size="mini" type="primary" @click="copyPinYin2">复制多音版本</button>
			<button size="mini" type="warn" @click="clearData">清除</button>
		</view>
	</view>
</template>

<script>
	var pinyin = require("pinyin");
	import pinyinText from '@/components/uni-pinyin-text/uni-pinyin-text.vue'
	// #ifdef H5
	import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy.js'
	// #endif


	export default {
		onShareAppMessage: (res) => {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let title = ""
			if (this.textData.length <= 5) {
				title = "\"" + this.textData + "\"的拼音，你拼对了吗？"
			} else {
				title = "\"" + this.textData.substr(0, 4) + "...\"的拼音，你拼对了吗？"
			}
			return {
				title: title,
				path: '/pages/index/index'
			}
		},
		components: {
			pinyinText
		},
		data() {
			return {
				isCopyHanzi: false,
				textData: "",
				pinyinData: "",
				zhuyinData: [],
				textDataPre: []
			}
		},
		created() {
			this.textData = "我长大了，我去过长城了！";
			this.hanziPinyin()
		},
		onShow() {
			console.log("xianshi")
			uni.getClipboardData({
				success: (res) => {
					console.log(res.data);
					if (res.data && typeof res.data == "string") {
						var reg = new RegExp("[\\u4E00-\\u9FFF]+");
						if (reg.test(res.data)) {
							this.textData = res.data
							this.hanziPinyin()
						} else {
							// this.textData = "我长大了，我去过长城了！";
							// this.hanziPinyin()
						}
					}
				}
			});
		},
		methods: {
			clearData(){
				this.textData="";
				this.zhuyinData=[];
			},
			handleCopyHanzi(e) {
				this.isCopyHanzi = e.target.value;
			},
			copyPinYin2() {
				this.copyPinYin(false)
			},
			copyPinYin(poly) {
				let temp = ""
				if (this.isCopyHanzi) {
					if (poly) {
						temp = this.zhuyinData.map(o => o.hanzi + " " + o.pinyin).join(" ");
						console.log(temp)
					} else {
						temp = this.pinyinData.map((value, index, arr) => {
							return this.zhuyinData[index].hanzi + " " + value
						}).join(" ");
						console.log(temp)
					}
				} else {
					if (poly) {
						temp = this.zhuyinData.map(o => o.pinyin).join(" ");
						console.log(temp)
					} else {
						temp = this.pinyinData.map(o => o).join(" ");
						console.log(temp)
					}
				}

				// #ifdef H5
				const result = h5Copy(temp)
				if (result === false) {
					uni.showToast({
						title: '不支持',
					})
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
				// #endif

				// #ifndef H5
				uni.setClipboardData({
					data: temp,
					success: function() {
						uni.showToast({
							title: "复制成功"
						})
					},
					fail: function() {
						uni.showToast({
							title: "复制失败"
						})
					}
				});
				// #endif
			},
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
				this.textData = e.detail.value
				this.hanziPinyin()
			},
			async hanziPinyin() {

				var [error, res] = await uni.request({
					data: {
						content: this.textData
					},
					dataType: "json",
					url: 'https://pinyin.downor.top/v1',
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: "POST"
				});
				if (res && res.statusCode === 200) {
					console.log(res.data)
					this.pinyinData = res.data
				} else {
					this.pinyinData = pinyin(this.textData, {
						heteronym: true, // 启用多音字模式
						segment: true // 启用分词，以解决多音字问题。
					})
				}
				console.log(this.pinyinData)
				this.textDataPre = this.textDataPreToList(this.textData)
				if (this.textDataPre.length > 0 && this.pinyinData.length > 0) {
					this.zhuyinData = []
					for (var i = 0; i < this.pinyinData.length; i++) {
						const element = this.pinyinData[i]
						this.zhuyinData.push({
							pinyin: element[0],
							hanzi: this.textDataPre[i]
						})
					}
				} else {
					this.zhuyinData = []
				}
			},
			textDataPreToList(textData) {
				let list = []
				var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");

				let preFlag = false
				for (var i = 0; i < textData.length; i++) {
					let elemnet = textData[i]
					if ((elemnet).match(/[\u4E00-\u9FA5]/g)) {
						list.push(elemnet)
					} else {
						if (i > 1) {
							//判断上一个
							if ((textData[i - 1]).match(/[\u4E00-\u9FA5]/g)) {
								list.push(elemnet)
							} else {
								let temp = list[list.length - 1] = list[list.length - 1] + elemnet
							}

						}
					}


				}
				return list
			}
		}
	}
</script>

<style scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		height: 100%;
	}

	.uni-title {
		padding: 10rpx 20rpx;
	}

	.uni-textarea {
		padding: 20px;
		border: solid #333333 1rpx;
		border-radius: 10rpx;
	}

	.text {
		padding: 20px;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
	}

	.text-item {
		margin-left: 10rpx;
	}

	.oprate {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 10rpx;
		width: 100%;
	}

	.oprate .switch {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	button {
		margin-top: 10rpx;
		width: 100%;
		opacity: 0.7;
	}
</style>
